<template>
  <div 
    class="image-slot" 
    @drop="onDrop" 
    @dragover="onDragOver"
    @dragenter="onDragEnter"
    @dragleave="onDragLeave"
    :class="{ 'is-dragging': isDragging }"
  >
    <input 
      ref="input" 
      type="file" 
      accept="image/*" 
      @change="onChange"
      style="display: none;"
    />
    
    <button 
      v-if="fileObj" 
      class="remove-btn" 
      @click="onRemove"
      title="删除图片"
    >
      🗑️
    </button>
    
    <div v-if="fileObj && fileObj.url" class="image-preview">
      <img :src="fileObj.url" :alt="'图' + index" />
    </div>
    
    <div v-else @click="onPickFile" style="cursor: pointer; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <div class="slot-title">{{ getLabel }}</div>
      <div class="upload-icon">+</div>
      <div class="slot-action">
        将图像拖放到此处<br/>
        -或- 点击上传
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageSlot',
  props: {
    index: {
      type: Number,
      required: true
    },
    fileObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      isDragging: false
    };
  },
  computed: {
    getLabel() {
      const labels = {
        1: '图片1(最左)',
        2: '图片2',
        3: '图片3',
        4: '图片4(最右)'
      };
      return labels[this.index] || `图片${this.index}`;
    }
  },
  methods: {
    onPickFile() {
      this.$refs.input.click();
    },
    onDrop(e) {
      e.preventDefault();
      e.stopPropagation();
      this.isDragging = false;
      
      const file = e.dataTransfer.files && e.dataTransfer.files[0];
      if (file && file.type.startsWith('image/')) {
        this.$emit('select', file);
      }
    },
    onChange(e) {
      const file = e.target.files && e.target.files[0];
      if (file) {
        this.$emit('select', file);
      }
      e.target.value = '';
    },
    onRemove(e) {
      e.stopPropagation();
      this.$emit('remove');
    },
    onDragOver(e) {
      e.preventDefault();
      e.stopPropagation();
    },
    onDragEnter(e) {
      e.preventDefault();
      e.stopPropagation();
      this.isDragging = true;
    },
    onDragLeave(e) {
      e.preventDefault();
      e.stopPropagation();
      this.isDragging = false;
    }
  }
};
</script>

<style scoped>
.image-slot {
  border: 1px dashed var(--border);
  background: #fafafa;
  border-radius: 8px;
  height: 160px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.image-slot.is-dragging {
  border-color: var(--primary);
  background: #e6f4ff;
}

.remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 77, 79, 0.95);
  border: 2px solid white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.remove-btn:hover {
  background: #ff4d4f;
  transform: scale(1.15);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

.image-preview {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.image-preview:hover img {
  transform: scale(1.05);
}

.slot-title {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
}

.upload-icon {
  font-size: 60px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--muted);
  z-index: 1;
}

.image-slot .slot-action {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
  z-index: 1;
  background: rgba(255, 255, 255, 0.8);
  padding: 3px 6px;
  border-radius: 3px;
}
</style>

